diff options
Diffstat (limited to 'src/app/groups/[groupId]/share-button.tsx')
| -rw-r--r-- | src/app/groups/[groupId]/share-button.tsx | 24 |
1 files changed, 14 insertions, 10 deletions
diff --git a/src/app/groups/[groupId]/share-button.tsx b/src/app/groups/[groupId]/share-button.tsx index 9e96a49..8676346 100644 --- a/src/app/groups/[groupId]/share-button.tsx +++ b/src/app/groups/[groupId]/share-button.tsx @@ -1,3 +1,4 @@ +'use client' import { CopyButton } from '@/components/copy-button' import { ShareUrlButton } from '@/components/share-url-button' import { Button } from '@/components/ui/button' @@ -7,7 +8,7 @@ import { PopoverContent, PopoverTrigger, } from '@/components/ui/popover' -import { env } from '@/lib/env' +import { useBaseUrl } from '@/lib/hooks' import { Group } from '@prisma/client' import { Share } from 'lucide-react' @@ -16,7 +17,8 @@ type Props = { } export function ShareButton({ group }: Props) { - const url = `${env.NEXT_PUBLIC_BASE_URL}/groups/${group.id}/expenses?ref=share` + const baseUrl = useBaseUrl() + const url = baseUrl && `${baseUrl}/groups/${group.id}/expenses?ref=share` return ( <Popover> @@ -30,14 +32,16 @@ export function ShareButton({ group }: Props) { For other participants to see the group and add expenses, share its URL with them. </p> - <div className="flex gap-2"> - <Input className="flex-1" defaultValue={url} readOnly /> - <CopyButton text={url} /> - <ShareUrlButton - text={`Join my group ${group.name} on Spliit`} - url={url} - /> - </div> + {url && ( + <div className="flex gap-2"> + <Input className="flex-1" defaultValue={url} readOnly /> + <CopyButton text={url} /> + <ShareUrlButton + text={`Join my group ${group.name} on Spliit`} + url={url} + /> + </div> + )} <p> <strong>Warning!</strong> Every person with the group URL will be able to see and edit expenses. Share with caution! |